import React from "react";
import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useNavigate, Outlet, useLocation } from "react-router-dom";
import { asyncToken } from "../../actions/userAction";
import { Layout, Menu, Breadcrumb, Avatar, Popover, Button, message } from "antd";

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
import "./mainhome.css";

export default function MainHome() {
  const [collapsed, setCollapsed] = useState(false);
  const [username, setusername] = useState("");
  const [useraccount, setuseraccount] = useState("");
  const [visible, setvisible] = useState(false);
  const dispatch: any = useDispatch();
  let location = useLocation();
  const list = useSelector((state: any) => state.listRouter.list);
  // console.log(location);
  let a: any = [];
  list.map((item: any) => {
    for (let i = 0; i < item.list.length; i++) {
      a.push(item.list[i]);
    }
    return a;
  });
  let id = a.filter((item: any) => item.path == location.pathname)[0].id;
  let name = a.filter((item: any) => item.path == location.pathname)[0].msg;
  let getid = (id: any) => {
    if (id == 1) {
      return "sub1";
    } else if (id >= 2 && id <= 3) {
      return "sub2";
    } else if (id >= 4 && id <= 6) {
      return "sub3";
    } else if (id >= 7 && id <= 12) {
      return "sub4";
    } else if (id >= 13 && id <= 17) {
      return "sub5";
    }
  };
  const [selectedIndex, setselectedIndex] = useState(id + "");
  const [changesubs, setchangesubs] = useState(getid(id) + "");

  const navigate = useNavigate();

  useEffect(() => {
    let token = window.localStorage.getItem("token");
    if (token) {
      dispatch(asyncToken({ token })).then(
        (res: any) => {
          setusername(res.data.info.username);
          setuseraccount(res.data.info.useraccount);
        },
        (res: any) => {
          console.log(res);
        }
      );
    } else {
      message.error("token已失效，请重新登录");
      navigate("/");
    }
  }, []);
  let hide = () => {
    setvisible(false);
    window.localStorage.removeItem("token");
    message.error("用户退出，请重新登录");
    navigate("/");
  };
  let onCollapse = (collapsed: any) => {
    setCollapsed(collapsed);
  };
  let handleVisibleChange = (visible: any) => {
    setvisible(visible);
  };
  return (
    <div>
      <div className="title">
        <Popover
          content={
            <a onClick={hide} style={{ marginLeft: "60px" }}>
              退出
            </a>
          }
          title={"账号" + useraccount}
          trigger="click"
          visible={visible}
          onVisibleChange={handleVisibleChange}>
          <Button type="primary" style={{ padding: 0, display: "flex", alignItems: "center", justifyContent: "space-around", width: "120px", height: "40px" }}>
            {username}
            <Avatar src="https://joeschmoe.io/api/v1/random" />
          </Button>
        </Popover>
      </div>

      <Layout style={{ minHeight: "100vh" }}>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
          <div className="logo" />
          <Menu theme="dark" selectedKeys={[selectedIndex]} mode="inline" openKeys={[changesubs]}>
            {list.map((item: any) => {
              return (
                <SubMenu
                  key={item.id}
                  title={item.msg}
                  onTitleClick={() => {
                    setchangesubs(item.id);
                  }}>
                  {item.list.map((list: any) => {
                    return (
                      <Menu.Item
                        key={list.id}
                        onClick={() => {
                          setselectedIndex(list.id + "");
                          navigate(list.path);
                        }}>
                        {list.msg}
                      </Menu.Item>
                    );
                  })}
                </SubMenu>
              );
            })}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: "0 16px" }}>
            <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>{name}</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <Outlet></Outlet>
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    </div>
  );
}
